<template>
	<view class="inquire-box">
		<view class="inquire-box-content">
			<view class="inquier-nav">
				<view v-for="(item,index) in navlist" :key="index" :class="{'btna': count === index}"  class="biaoti2" @click="change(index)">{{ item }}</view>
			</view>
			<view class="inquier-nav-con">
				<view  class="inquier_info" :class="{dis:count === 0}">
					<view v-if="wpagelist.length==0" style="text-align: center;">
						<image src="../../../static/nodata.png"  class="nodata_img"></image>
					</view>
					<!-- 未处理 -->
					<!-- <chulizhong></chulizhong> -->
					<view class="chulizhong-box" v-if="wpagelist.length>0">
						<view v-for="(number, index) in wpagelist " :key="index">
							<view class="leave-content">
								<view class="leave-content-left">
									<view class="leave-content-left-top">
										<view class="leave-content-name zhengwen1">{{ number.name }}</view>
										<view class="leave-content-classnumber zhengwen1">学号：{{ number.sno }}</view>
									</view>
									<view class="leave-content-time">
										<view class="leave-tiem zhengwen2">请假时间：{{number.begintime}}至 {{number.endtime}}</view>
										<view class="leave-date zhengwen2">总 时 长：{{number.hours}}小时</view>
									</view>
									<view class="leave-content-time">
										<view class="leave-tiem zhengwen2">请假原因：{{number.reason.substr(0,40)+"..."}}</view>
									</view>
								</view>
								<view class="status_button_box">
									<view class="z_qingjia_status">
										<view class="zhengwen2">
											处理状态：
										</view>
										<view class="zhengwen2">
											{{number.fdy}}{{number.shenpi_status}}
										</view>
										
									</view>
									
									<view class="leave-content-right">
										<view class="leave-content-right-box zhengwen1" @click="chexiao(number.leave_id)">撤销</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<view class="inquier_info" :class="{dis:count === 1}">
					<!-- 处理中 -->
					<view v-if="ypagelist.length==0" style="text-align: center;">
						<image src="../../../static/nodata.png"  class="nodata_img"></image>
					</view>
					<!-- <qingjiazhong></qingjiazhong> -->
					<view class="chulizhong-box">
					<view v-for="(item, index) in ypagelist " :key="index" v-if="ypagelist.length>0">
							<view class="leave-content" >
								<view class="leave-content-left" @click="printEvent(item.leave_id,item.shenpi_status)">
									<view class="leave-content-left-top">
										<view class="leave-content-name zhengwen1">{{item.name}}</view>
										<view class="leave-content-classnumber zhengwen1">学号：{{item.sno}}</view>
									</view>
									<view class="leave-content-time">
										<view class="leave-tiem zhengwen2">请假时间：（总时长{{item.hours}}小时）</view>
										<view class="leave-date zhengwen2">{{item.ybegintime}} 至 {{item.yendtime}}</view>
									</view>
								</view>
								<view class="status_button_box">
									<view class="z_qingjia_status"  >
										<view class="zhengwen2">
											处理状态：
										</view>
										<view class="zhengwen2" :class="{red:item.shenpi_status.endsWith('未同意')}">
											{{item.shenpi_status}}
										</view>
									</view>
									<view class="leave-content-right">
										<view class="leave-content-right-box zhengwen1 color" v-if="!item.shenpi_status.endsWith('未同意')" @click="xiaojia(item.yendtime,item.leave_id)">销假</view>
									</view>
									<view class="leave-content-right">
										<view class="leave-content-right-box zhengwen1" @click="ychexiao(item.leave_id)">撤销</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="inquier_info" :class="{dis:count === 2}">
					<!-- 统计 -->
					<xiaojiajilu :Month='Month'></xiaojiajilu>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import chulizhong from "@/pages/components/chulizhong.vue"
	import yichuli from "@/pages/components/yichuli.vue"
	import qingjiazhong from "@/pages/components/qingjiazhong.vue"
	import xiaojiajilu from "@/pages/components/xiaojiajilu.vue"
	
	export default {
		data() {
			return {
				navlist:['未完成','已完成','统计'],
				count:0,
				wpagelist:[],
				ypagelist:[],
				name:'',
				sno:'',
				hours:'',
				begintime:'',
				endtime:'',
				ybegintime:'',
				yendtime:'',
				fdy:'',
				shenpi_status:'',
				leave_id:'',
				list:'',
				time:'',
				Month:[],
				
			}
		},
		methods: {
			
			//获取当前时间
			getTime:function(){
						var date = new Date(),
						year = date.getFullYear(),
						month = date.getMonth() + 1,
						day = date.getDate(),
						hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
						minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
						second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						month >= 1 && month <= 9 ? (month = "0" + month) : "";
						day >= 0 && day <= 9 ? (day = "0" + day) : "";
						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
						return timer;
					},
			change(index){
				this.count = index;
			},
			xiaojia(yendtime,leave_id){
				
				this.time = this.getTime();
				//dateCurrent<dateEnd正常销假，dateCurrent>dateEnd超时销假
				var dateCurrent = new Date(this.time);
				var dateEnd = new Date(yendtime);				
				var dateDiff = dateCurrent.getTime() - dateEnd.getTime();	
				var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数				
				var hours = dayDiff*24; //计算出小时数
				if(hours>0){//超时销假
				
					uni.navigateTo({
					    // url: '/pages/cexiaoqingjia/chaoshixiaojia?leave_id='+leave_id+'&overtime='+hours
							// 第一个版本，不管是否超时，都按照正常销假处理，如果改成超时销假，使用上面注释的路径
					    url: '/pages/cexiaoqingjia/zhengchangxiaojia?leave_id='+leave_id
					});
					
				}
				if(hours<=0){//正常销假
				
					uni.navigateTo({
						url: '/pages/cexiaoqingjia/zhengchangxiaojia?leave_id='+leave_id
					});
							
				}
			},
			//已处理撤销
			ychexiao(leave_id){
				uni.navigateTo({
					url: '/pages/cexiaoqingjia/cexiaoqingjia?leave_id='+leave_id
				});
			},
			chexiao(id) {
				uni.showModal({
				    title: '提示',
				    content: '您确定撤销吗？',
				    success:  (res)=> {
				        if (res.confirm) {
				            var form = JSON.stringify({
				            	"leave_id": id
				            });	
				            uni.request({
				            	// url:"/api/leave/updateUnfinishedLeaveStatus",
				            	url:this.baseUrl+ "/leave/updateUnfinishedLeaveStatus?satoken="+uni.getStorageSync('satoken'),
				            	method:'POST',
				            	data: form,
				            	withCredentials:true,
				            	headers: {
				            	// "token": localStorage.getItem("token")
				            	// "satoken": uni.getStorageSync('satoken')
				            	 },
				            	success:(res) => {
				            		setTimeout(() => {
				            			  uni.showToast({
				            				title: '撤销成功！',
				            			  });
				            			  setTimeout(() => {
				            				// 刷新当前页面
											var pages = getCurrentPages(); //获取所有页面的数组对象
											var currPage = pages[pages.length - 1]; //当前页面
											uni.reLaunch({
												url: currPage.$page.fullPath
											})
				            			  }, 1000)
				            			}, 0);      
				            		console.info(res);
				            	}
				            })
				        }
				    }
				});
				
				
			},
			// 打印请假单 
			printEvent(id,status) {
				if(!status.endsWith("未同意")){
					uni.navigateTo({
						url: '/pages/qingjaiPrint/qingjaiPrint?id='+id
					});
				}
				
			},

		},
		
		onLoad(options) {
		 
			var wform = JSON.stringify({
				"page": 1,
				"length": 20,
				"status":1
			});	
			var yform = JSON.stringify({
				"page": 1,
				"length": 20,
				"status":1
			});	
			uni.request({
				// url:"/api/leave/searchLeaveList",
				url:this.baseUrl+ "/leave/searchLeaveList?satoken="+uni.getStorageSync('satoken'),
				method:'POST',
				data: wform,
				withCredentials:true,
				headers: {
				// "token": localStorage.getItem("token")
				 },
				success:(res) => {
					let page=res.data.page;
					this.wpagelist=page.list;
					
				
				}
			});
			
			uni.request({
				// url:"/api/leave/searchLeaveListDone",
				url:this.baseUrl+ "/leave/searchLeaveListDone?satoken="+uni.getStorageSync('satoken'),
				method:'POST',
				data: yform,
				withCredentials:true,
				headers: {
				// "token": localStorage.getItem("token")
				 },
				success:(res) => {
					let page=res.data.page;
					this.ypagelist=page.list;
					console.log(this.ypagelist)
					
				
				}
			});
			
			
		},
		mounted(){
			
			uni.request({
				// url:"/api/leave/searchMonth",
				url:this.baseUrl+ "/leave/searchMonth?satoken="+uni.getStorageSync('satoken'),
				method:'GET',
				withCredentials:true,
				headers: {
				// "token": localStorage.getItem("token")
				 },
				success:(res) => {
					this.Month=res.data.result;
					console.info(res.data.result);
					
				}
			})
		},
		components:{
			chulizhong,
			yichuli,
			qingjiazhong,
			xiaojiajilu
			
		}
	}
</script>

<style lang="scss">
	@import url(@/common/common.css);
	.inquire-box{
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		.inquire-box-content{
			.inquier-nav{
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				view{
					justify-content: center;
					align-items: center;
					flex: 1;
					display: flex;
					background: #f5f5f5;
					padding: 40rpx 0;
					
				}
			}
			
			.btna{
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				color: #77312A;
				font-weight: bold;
				background: #ffffff !important;
				position: relative;
			}
			
		}
		.inquier_info{
			display: none;
		}
		.dis{
			display: block;
		}
	}
	.chulizhong-box{
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
		.leave-content{
			width: 100%;
			// display: flex;
			box-sizing: border-box;
			background-color: #ffffff;
			// flex-direction: row;
			// align-items: center;
			margin-top: 30rpx;
			padding: 30rpx 0;
			padding-left: 20rpx;
			border-bottom: 1rpx solid #999999;
			.status_button_box {
				margin-top: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
			.z_qingjia_status {
				flex: 1;	
			}
			.leave-content-left{
				flex: 2;
				display: flex;
				flex-direction: column;
				.leave-content-left-top{
					display: flex;
					flex-direction: row;
					// font-size: 28rpx;
					.leave-content-name{
						margin-right: 30rpx;
					}
				}
				.leave-content-time{
					// font-size: 24rpx;
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					.leave-tiem{
						
						margin-bottom: 10rpx;
					}
					.leave-date{
						letter-spacing: 1rpx;
					}
					
				}
				
			}
			.leave-content-right{
				flex: 1;
				width: 100%;
				
				.leave-content-right-box{
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					background-color: #f5f5f5;
					text-align: center;
					margin: auto;
					margin-right: inherit;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// font-size: 28rpx;
				}
				
			}
		}
	}
	.chulizhong-box{
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
		.leave-content{
			width: 100%;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: 30rpx;
			padding: 30rpx 0;
			padding-left: 20rpx;
			border-bottom: 1rpx solid #999999;
			.status_button_box {
				margin-top: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
			.z_qingjia_status {
				flex: 1;	
			}
			.color {
				color: #047945;
			}
			.leave-content-left{
				flex: 2;
				display: flex;
				flex-direction: column;
				.leave-content-left-top{
					display: flex;
					flex-direction: row;
				
					.leave-content-name{
						margin-right: 30rpx;
					}
				}
				.leave-content-time{
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					.leave-tiem{
						
						margin-bottom: 10rpx;
					}
					.leave-date{
						letter-spacing: 1rpx;
					}
					
				}
				
			}
			.leave-content-right{
				flex: 1;
				width: 100%;
				
				.leave-content-right-box{
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					background-color: #f5f5f5;
					text-align: center;
					margin: auto;
					margin-right: inherit;
				}
				
			}
		}
	}
	.red{color:#F15B29}
</style>
